<template>
    <div class="day-event" :style="getEventBackgroundColor">
        <div>
            <span class="has-text-centered details">{{event.details}}</span>
            <div class="has-text-centered icons">
                <i class="fa fa-pencil-square edit-icon"></i>
                <i class="fa fa-trash-can delete-icon"></i>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "CalendarEvent",
    props: ['event', 'day'],
    computed: {
        getEventBackgroundColor() {
            const colors = ['#FF9999', '#85D6FF', '#99FF99'];
            let randomColor = colors[Math.floor(Math.random() * colors.length)];
            return `background-color: ${randomColor}`;
        }
    }
}

</script>

<style>
.day-event {
    margin-top: 6px;
    margin-bottom: 6px;
    display: block;
    color: #4c4c4c;
    padding: 5px;

    .details {
        display: block;
    }

    .icons .fa {
        padding: 0 2px;
    }

    input {
        background: none;
        border: 0;
        border-bottom: 1px solid #fff;
        width: 100%;

        &:focus {
            outline: none;
        }
    }
}
</style>